<template>
  <view class="travel-app">
    <view class="header">
      <view class="title-container">
        <image src="/static/images/Rectangle125.png" mode="aspectFit" class="header-image" />
        <text class="title">Discover\nThe wonderful world!</text>
      </view>
      <text class="description">Have you ever been on holiday to the Greek islands before? There's a good chance you may have come across Santorini before.</text>
    </view>
    
    <view class="content">
      <view class="image-section">
        <view class="image-gallery">
          <view class="gallery-item">
            <image src="/static/images/Rectangle119.png" mode="aspectFill" class="gallery-image" />
            <view class="review-card">
              <view class="review-content">
                <image src="/static/images/Rectangle123.png" mode="aspectFill" class="avatar" />
                <view class="review-info">
                  <text class="name">Vanshika</text>
                  <view class="rating">
                    <text class="star">★</text>
                    <text class="score">4/5</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
          <view class="gallery-item">
            <image src="/static/images/Rectangle120.png" mode="aspectFill" class="gallery-image-horizontal" />
          </view>
        </view>
        <view class="image-gallery" style="margin-top: -30px; padding: 0 10px;">
          <view class="gallery-item">
            <image src="/static/images/Rectangle121.png" mode="aspectFill" class="gallery-image" />
            <view class="review-card">
              <view class="review-content">
                <image src="/static/images/Rectangle123_2.png" mode="aspectFill" class="avatar" />
                <view class="review-info">
                  <text class="name">Sakshi</text>
                  <view class="rating">
                    <text class="star">★</text>
                    <text class="score">3.6/5</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      
      <view class="color-dots">
        <view class="dot blue"></view>
        <view class="dot orange"></view>
        <view class="dot green"></view>
        <view class="dot yellow"></view>
        <view class="dot cyan"></view>
      </view>
      
      <view class="footer">
        <text class="footer-text">We believe that traveling around the world shouldn't be hard.</text>
        <button class="get-started" @click="onGetStarted">Get Started</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'TravelAppPage',
  methods: {
    onGetStarted() {
      uni.switchTab({
        url: '/pages/explore/TravelExplorePage',
        success: () => {
          console.log('跳转成功');
        },
        fail: (err) => {
          console.error('跳转失败:', err);
        }
      });
    }
  }
}
</script>

<style>
.travel-app {
  font-family: 'Poppins', sans-serif;
  padding: 20px;
  background-color: #FFFFFF;
  min-height: 100vh;
}

.header {
  margin-bottom: 20px;
}

.title-container {
  position: relative;
  margin-bottom: 15px;
}

.header-image {
  width: 100%;
  height: 200px;
  border-radius: 16px;
}

.title {
  position: absolute;
  top: 20px;
  left: 20px;
  font-size: 34px;
  font-weight: 600;
  line-height: 1.5em;
  color: #000000;
}

.description {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5em;
  color: #ABABAB;
  margin: 15px 0;
}

.image-section {
  margin: 20px 0;
}

.image-gallery {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
}

.gallery-item {
  position: relative;
  flex: 1;
}

.gallery-image {
  width: 100%;
  height: 120px;
  border-radius: 8px;
}

.gallery-image-horizontal {
  width: 100%;
  height: 100%;
  border-radius: 8px;
}

.review-card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: transparent;
  border-radius: 45px;
  padding: 3px;
  width: 80%;
  z-index: 1;
}

.review-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  background-color: #FFFFFF;
  border-radius: 45px;
  padding: 8px;
  box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.09);
  justify-content: flex-start;
}

.avatar {
  width: 35px;
  height: 35px;
  border-radius: 17.5px;
  flex-shrink: 0;
}

.review-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  flex: 1;
}

.name {
  font-family: 'Old Standard TT', serif;
  font-weight: 700;
  font-size: 11px;
  color: #000000;
}

.rating {
  display: flex;
  align-items: center;
  gap: 1px;
}

.star {
  color: #FFA000;
  font-size: 9px;
}

.score {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 7px;
  color: #000000;
}

.color-dots {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 10px;
  margin: 20px 0;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.dot.blue { background-color: #257ECD; }
.dot.orange { background-color: #FE712A; }
.dot.green { background-color: #7EFC8A; }
.dot.yellow { background-color: #FFA000; }
.dot.cyan { background-color: #6FDFDF; }

.footer {
  margin-top: 30px;
}

.footer-text {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.625em;
  color: #89807A;
  margin-bottom: 20px;
  display: block;
}

.get-started {
  width: 100%;
  padding: 15px;
  background: linear-gradient(to bottom, #33D69F, #1EC089);
  color: #FFFFFF;
  border: none;
  border-radius: 16px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5em;
  text-align: center;
}
</style> 